<template>
	<view class="list-view">
		<view class="top-bar"><uni-navbar :show="show" @click-show="show = !show" :fixed="true" :back="true" color="#fff" title="统计分析"></uni-navbar></view>

		<view class="filter-box" v-if="show">
			<view class="form-box">
				<u-form ref="uForm">
					<u-form-item class="form-item" label="提交时间"><date-time-picker placeholder="请选择提交时间" :defaultValue="statistics.time" :fields="fields" :old="true" @change="timeChange"></date-time-picker></u-form-item>

					<u-form-item class="form-item" label="联络站" v-if="tabsCurrent == 2">
						<u-input v-model="llzName" type="select" :select-open="llzShow" placeholder="请选择联络站" @click="llzShow = true" />
						<select-tree ref="llzTree" :show="llzShow" :range="llzList" rangeKey="stationName" :selected="llzStr" :multiple="false" @confirm="treeConfirm($event, 'llz')" @cancel="treeCancel($event, 'llz')"></select-tree>
					</u-form-item>
				</u-form>
			</view>
			<view class="fiexd-btm">
				<view class="flex-box">
					<u-button class="form-btn" type="default" @click="resert">清除</u-button>
					<u-button class="form-btn" type="error" @click="filter">确定</u-button>
				</view>
			</view>
		</view>

		<u-tabs class="tab-fill-box" :list="tabsList" :height="60" :font-size="28" :show-bar="false" :is-scroll="false" :is-fill="true" :current="tabsCurrent" @change="tabsChange"></u-tabs>

		<view class="tab-box">
			<view class="title" :class="fields == 'year' ? 'active' : ''" @click="timeTap('year')">本年</view>
			<view class="title" :class="fields == 'month' ? 'active' : ''" @click="timeTap('month')">本月</view>

			<view class="search-filter" @click="show = !show"><view>筛选</view></view>
		</view>

		<view class="table-box" v-show="tabIndex == 10">
			<view class="com-h2">
				<view class="span"><text>问题办理情况统计</text></view>
			</view>
			<view class="canvas-box">
				<!-- 柱状图 -->
				<uni-charts type="column" :chartData="chartData1" :eopts="opts1" :reshow="tabIndex == 10"></uni-charts>
			</view>
			<view class="com-h2">
				<view class="span"><text>问题处理情况统计</text></view>
			</view>
			<view class="pro-row-simple" v-if="countNum.length > 0">
				<view class="pro-col" @click="listTo('/pages/condi/list?status=0')">
					<view class="pro-left"><image class="image" src="/static/img/icon_28.png" mode="widthFix"></image></view>
					<view class="pro-right">
						{{ countNum[4].dictName }}
						<text class="text">{{ countNum[4].count }}</text>
					</view>
				</view>
				<view class="pro-col" @click="listTo('/pages/condi/list?status=1')">
					<view class="pro-left"><image class="image" src="/static/img/icon_28.png" mode="widthFix"></image></view>
					<view class="pro-right">
						{{ countNum[0].dictName }}
						<text class="text">{{ countNum[0].count }}</text>
					</view>
				</view>
				<view class="pro-col" @click="listTo('/pages/condi/list?status=2')">
					<view class="pro-left"><image class="image" src="/static/img/icon_28.png" mode="widthFix"></image></view>
					<view class="pro-right">
						{{ countNum[1].dictName }}
						<text class="text">{{ countNum[1].count }}</text>
					</view>
				</view>
				<view class="pro-col" @click="listTo('/pages/condi/list?status=3')">
					<view class="pro-left"><image class="image" src="/static/img/icon_28.png" mode="widthFix"></image></view>
					<view class="pro-right">
						{{ countNum[2].dictName }}
						<text class="text">{{ countNum[2].count }}</text>
					</view>
				</view>
				<view class="pro-col" @click="listTo('/pages/condi/list?status=4')">
					<view class="pro-left"><image class="image" src="/static/img/icon_28.png" mode="widthFix"></image></view>
					<view class="pro-right">
						{{ countNum[3].dictName }}
						<text class="text">{{ countNum[3].count }}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="table-box" v-show="tabIndex == 20">
			<u-table class="table-inner" border-color="#F8F8F8" :key="tabIndex">
				<u-tr>
					<u-th width="450rpx">代表联络站</u-th>
					<u-th>问题数</u-th>
				</u-tr>
				<view class="table-cell" v-for="(item, index) of statisticsList2" :key="index">
					<u-tr>
						<u-td width="450rpx">{{ item.stationName }}</u-td>
						<u-td>
							<text class="clamp" @click="listTo('/pages/condi/site_statistics?id=' + item.id)">{{ item.allCount }}</text>
						</u-td>
					</u-tr>
				</view>
			</u-table>

			<u-loadmore :status="loading" />
			<!-- <view class="com-h2">
				<view class="span"><text>代表联络站收到问题情况</text></view>
			</view> -->
			<!-- <view class="canvas-box">
				<uni-charts type="pie" :chartData="chartData2" :reshow="tabIndex == 20"></uni-charts>
			</view> -->
		</view>

		<view class="table-box" v-show="tabIndex == 30">
			<!-- <u-table class="table-inner" border-color="#F8F8F8" :key="tabIndex">
				<u-tr>
					<u-th style="flex: 0 0 300rpx">类别</u-th>
					<u-th>件数</u-th>
				</u-tr>
				<view class="table-cell" v-for="(item, index) of statisticsList" :key="index" @click="navTo(item)">
					<u-tr>
						<u-td style="flex: 0 0 300rpx">{{ item.opinionType }}</u-td>
						<u-td>
							<text class="clamp">{{ item.opinionCount }}</text>
						</u-td>
					</u-tr>
				</view>
			</u-table> -->
			<view class="pro-row-plus">
				<view class="pro-col" v-for="(item, index) of statisticsList3" :key="index" @click="typeTap(index)">
					<view class="pro-right">
						<text class="text">{{ item.allCount }}</text>
						{{ item.dictName }}
					</view>
				</view>
			</view>
			<view class="com-h2">
				<view class="span"><text>问题分类统计</text></view>
			</view>
			<view class="canvas-box">
				<!-- 柱状图 -->
				<uni-charts type="column" :chartData="chartData3" :eopts="opts3" :reshow="tabIndex == 30"></uni-charts>
			</view>
		</view>

		<!-- <u-loadmore :status="loading" /> -->
		<u-back-top :scroll-top="scrollTop" top="200"></u-back-top>

		<view v-if="false && loading"></view>
	</view>
</template>

<script>
import uniCharts from '@/components/uni-charts/uni-charts.vue';
import selectTree from '@/components/uni-select-tree.vue';
import dateTimePicker from '@/components/uni-datetime-picker';
import { mapState } from 'vuex';
export default {
	components: {
		selectTree,
		uniCharts,
		dateTimePicker
	},
	data() {
		return {
			key: 0,
			scrollTop: 0,
			show: false,
			tabIndex: 10,
			tabsCurrent: 0,
			tabsList: [
				{
					name: '问题情况统计',
					value: 0
				},
				{
					name: '问题类型统计',
					value: 2
				}
			],

			llzIds: [],
			llzName: '',
			llzShow: false,
			llzList: [],
			llzStr: '',

			statisticsList1: [],
			statisticsList2: [],
			statisticsList3: [],
			countNum: [],
			fields: 'year',

			opts1: {
				yAxis: {
					minInterval: 1
				}
			},
			chartData1: {
				categories: [],
				series: [
					{
						data: []
					}
				]
			},
			chartData2: {
				series: [
					{
						data: []
					}
				]
			},
			opts3: {
				xAxis: {
					axisLabel: {
						interval: 0,
						rotate: -30,
						formatter: (index, value) => {
							return index + value;
						}
					}
				}
			},
			chartData3: {
				categories: [],
				series: [
					{
						data: []
					}
				]
			},

			statistics: {
				stationId: '',
				time: ''
			},
			loading: 'loadmore'
		};
	},
	onLoad() {
		this.loadLogin();
		this.loadData(10);
		this.loadData(20);
		this.loadData(30);
		this.loadSite();
	},
	onReachBottom() {
		if (this.loading == 'loadmore' && this.tabIndex == 20) this.loadData(20);
	},
	onPageScroll(res) {
		this.scrollTop = res.scrollTop;
	},
	computed: {
		...mapState(['userInfo'])
	},
	methods: {
		loadLogin() {
			if (this.userInfo.sysUser) {
				this.clientCode = this.userInfo.sysUser.clientCode;
				this.userId = this.userInfo.sysUser.id;
				this.roleCodes = this.userInfo.roleCodes.join(',');

				this.pageNum = 1;
				this.pageSize = 20;

				if (!this.$roleCodes('llz_gly_new') && !this.$roleCodes('weiyuan')) {
					this.tabsList.splice(1, 0, {
						name: '联络站处理统计',
						value: 1
					});
				}
			} else {
				this.$logout();
			}
		},
		loadData(tabIndex, type = 'add') {
			if (tabIndex == 20) {
				if (this.loading == 'loading') {
					return false;
				}
				if (type == 'add') {
					if (this.loading == 'nomore') {
						return false;
					}
					this.loading = 'loading';
				} else {
					this.loading = 'loading';
				}
				if (type != 'add') {
					this.pageNum = 1;
				}
			}
			let url;
			switch (tabIndex) {
				case 20:
					url = '/minqingzhitong/msPublicOpinion/getStatisticsByStation';
					break;
				case 30:
					url = '/minqingzhitong/msPublicOpinion/getStatisticsByType';
					break;
				default:
					url = '/minqingzhitong/msPublicOpinion/getStatisticsByResulst';
			}
			let data = {
				pageNum: this.pageNum,
				pageSize: this.pageSize,
				userId: this.userId,
				clientCode: this.clientCode,
				role: this.roleCodes,
				...this.statistics
			};
			this.$request(url, data, {
				load: true
			}).then((res) => {
				if (!res.data) {
					return false;
				}

				if ([10].includes(tabIndex)) {
					this.statisticsList1 = res.data;
					this.countNum = res.data.count;
					if (!!res.data.mapList) {
						this.chartData1.categories = [];
						this.chartData1.series[0].data = [];
						res.data.mapList.forEach((item) => {
							this.chartData1.categories.push(item.dictName);
							this.chartData1.series[0].data.push(item.count);
						});
					}
				}

				if ([20].includes(tabIndex)) {
					let count = 0;
					if (type != 'add') {
						uni.stopPullDownRefresh();
						this.statisticsList2 = [];
					}
					this.loading = this.pageNum < Math.ceil(res.data.total / this.pageSize) ? 'loadmore' : 'nomore';
					this.pageNum = this.pageNum + 1;
					this.statisticsList2 = this.statisticsList2.concat(res.data);
					this.loaded = true;
					if (this.statisticsList2.length <= 0) {
						this.loading = 'nodata';
					}
					// this.chartData2.series[0].data = [];
					// res.data.forEach((item, index) => {
					// 	this.chartData2.series[0].data.push({
					// 		name: item.stationName,
					// 		value: parseInt(item.allCount)
					// 	});
					// });
				}

				if ([30].includes(tabIndex)) {
					this.statisticsList3 = res.data;
					this.chartData3.categories = [];
					this.chartData3.series[0].data = [];
					res.data.forEach((item) => {
						if (item.dictValue) {
							this.chartData3.categories.push(item.dictName);
							this.chartData3.series[0].data.push(item.allCount);
						}
					});
				}
			});
		},
		treeConfirm(e, type) {
			if (!e || e.length == 0) {
				this[type + 'Show'] = false;
				this[type + 'Name'] = '';
				this[type + 'Ids'] = [];
				return false;
			}

			this[type + 'Ids'] = [];
			if (e.length > 0) {
				this[type + 'Ids'].push(e[0].id);
				this[type + 'Name'] = e[0].stationName;

				this.statistics.stationId = e[0].id;
			}
			this[type + 'Show'] = false;
		},
		treeCancel(e, type) {
			this[type + 'Show'] = false;
		},
		loadSite() {
			this.$request('/minqingzhitong/msLiaisonStation/list', {
				pageNum: 1,
				pageSize: 9999,
				stationFlag: '',
				contacts: '',
				street: '',
				stationName: ''
			}).then((res) => {
				if (res.data) {
					this.llzList = res.data;

					if (this.statistics.stationId) {
						this.llzIds = [];
						res.data.forEach((item) => {
							if (item.id == this.statistics.stationId) {
								this.llzIds.push(this.statistics.stationId);
								this.llzStr = this.llzIds.join(',');
								this.llzName = item.stationName;
							}
						});
					}
				}
			});
		},
		timeTap(e) {
			this.fields = e;
			this.statistics.time = '2022';
			let date = this.$writeCurrentDate();
			if (this.fields == 'year') {
				this.statistics.time = date.year + '';
			} else {
				this.statistics.time = date.year + '-' + date.month;
			}

			this.loadData(this.tabIndex, 'refresh');
		},
		typeTap(e) {
			// this.chartData3.categories = [];
			// this.chartData3.series[0].data = [];
			// this.statisticsList[e].mapClassify.forEach(item => {
			// 	this.chartData3.categories.push(item.dictName);
			// 	this.chartData3.series[0].data.push(item.count);
			// });
		},
		tab(e) {
			this.tabIndex = e;
			this.loadData(this.tabIndex, 'refresh');
		},
		tabsChange(index) {
			this.tabsCurrent = index;
			this.tabIndex = this.tabsList[index].value * 10 + 10;
			this.fields = 'year';
			// this.resert();
		},
		timeChange({ date, dt }) {
			if (this.fields == 'year') {
				this.statistics.time = date.year + '';
			} else {
				this.statistics.time = date.year + '-' + date.month2;
			}
		},
		filter() {
			this.show = false;
			this.loadData(this.tabIndex, 'refresh');
		},
		resert() {
			this.show = false;
			this.statistics.stationId = '';
			this.statistics.time = '';
			this.loadData(this.tabIndex, 'refresh');
		},
		navTo(item, arr = []) {
			let url = '/pages/condi/list?type=' + item.opinionType;
			uni.navigateTo({
				url: url
			});
		},
		listTo(e) {
			uni.navigateTo({
				url: e
			});
		},
		detailTo(item) {
			uni.navigateTo({
				url: '/pages/condi/detail?id=' + item.id
			});
		}
	}
};
</script>

<style lang="scss">
.tab-box {
	padding-bottom: 18rpx;
	font-size: 14px;
	color: #666;
	line-height: 60rpx;
	overflow-x: auto;
	background-color: #fff;

	& + .tab-box {
		padding-top: 0;
	}

	.search-filter {
		margin: 0 30rpx;
		width: 120rpx;
		height: 60rpx;
		float: right;
		text-align: center;
		border-radius: 6rpx;
		background-color: #e6e7e8;
	}

	.title {
		margin-left: 30rpx;
		width: 120rpx;
		height: 60rpx;
		float: left;
		text-align: center;
		border-radius: 6rpx;
		background-color: #e6e7e8;

		&.active {
			color: #fff;
			background-color: #d0021b;
		}
	}
}

.canvas-inner {
	position: relative;
	height: 500rpx;
}

.canvas-box {
	position: relative;
	width: 100%;
	height: 500rpx;
	overflow: hidden;
}

#chartData2 {
	display: block;
	width: 100%;
	height: 500rpx;
}

#chartData1 {
	display: block;
	width: 100%;
	height: 500rpx;
}

.tab-nav {
	padding: 0 20rpx;
	border: 0;
	background-color: #fff;

	&:after {
		content: '';
		flex-shrink: 0;
		width: 20rpx;
		height: 1rpx;
	}

	.tab-item {
		flex-shrink: 0;
		margin: 0 10rpx;
		padding: 0 10rpx;
		height: 60rpx;
		color: #666;
		text-align: center;
		border-radius: 6rpx;
		background-color: #e6e7e8;
	}

	.tab-item.active {
		font-weight: bold;
		color: #fff;
		background-color: #d0021b;
	}
}

.pro-row-plus .pro-col {
	padding: 10rpx 0;
}

.filter-box {
	position: fixed;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	z-index: 998;
	background-color: #fff;
}

.table-box {
	clear: both;

	.name {
		display: flex;
		flex-wrap: nowrap;
		justify-content: center;

		text {
			color: #333;
			width: 260rpx;
			text-align: left;
		}
	}

	text {
		color: #d0021b;
	}

	.break-all {
		word-break: break-all;
	}

	image {
		margin-right: 20rpx;
		width: 80rpx;
		height: 80rpx;
	}
}

.com-h2 {
	margin: 0;
	border: 0;
}

.pro-row-plus {
	margin: 0;
	border-top: 20rpx solid #f6f6f6;
}

.form-box {
	.form-item {
		@include mp-flex;
		border-bottom: 20rpx solid #f5f7fa;
	}
}

.fiexd-btm {
	position: static;
	padding: 30rpx;
}
</style>
